<template>
  <div class="v-attribute-slot">
    <div
      class="_attribute-header g-flex-0 g-jc-sb"
      :class="[$global.isIpcWindow ? '_BackGroundWhite' : '__BackGroundGrey']"
    >
      <div class="g-ai-c g-one-line g-pd-l-16">
        <span
          class="_sort"
          :class="{ '_sort-active': data.expandActive }"
          @click="slotPaneModel.handleSpreadAll()"
        >
          <img src="statics/icons/app/iconspread.svg" />
        </span>
        <span
          class="_sort"
          :class="{ '_sort-active': data.shrinkActive }"
          @click="slotPaneModel.handleShrinkAll()"
        >
          <img src="statics/icons/app/iconshrink.svg" />
        </span>
      </div>
    </div>
    <div class="_attribute-content g-fd-c">
      <div
        v-if="data.searchActive"
        class="g-flex-0"
      >
        <el-input
          v-model="data.searchQuery"
          placeholder="搜索"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </div>
      <PropertySlotTable
        :key="data.modelData?.id"
        :slotsPaneModel="slotPaneModel"
        :instanceName="'值'"
        class="g-flex-1"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import PropertySlotTable from "./PropertySlotTable.vue";
import { Search } from '@element-plus/icons-vue';
import type { SlotsPaneModel } from "./models/SlotsPaneModel";

// const attributeTabsModel = app.activeProject!.attributeTabsModel;
const attributeTabsModel = computed(() => app.activeProject!.attributeTabsModel);

const slotPaneModel = computed(() => attributeTabsModel.value.slotPaneModel as SlotsPaneModel);
const data = computed(() => {
  return attributeTabsModel.value.data;
});
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-attribute-slot {
  display: flex;
  padding: 0 0px;
  flex-direction: column;
  background: $frame-siderbar-bg-color;
  overflow: hidden;
  height: 100%;
  ._BackGroundWhite {
    background-color: white;
  }
  .__BackGroundGrey {
    background: $frame-siderbar-bg-color;
  }
  ._attribute-header {
    height: 28px;
    flex: 0 0 auto;
    padding-left: 4px;
    padding-right: 8px;
    .divider {
      width: 1px;
      height: 16px;
      background: #b1cee2;
      margin: 0 8px;
    }
    ._sort {
      font-size: 0;
      display: inline-block;
      cursor: pointer;
      width: 24px;
      height: 24px;
      padding: 4px 0 0 4px;

      img {
        width: 14px;
        height: 14px;
      }
      &:hover {
        border: 1px solid #d0d0d0;
        background: $item-active-bg-color;
      }
      &._sort-active {
        background: $item-active-bg-color;
        border: 1px solid #e0e0e0;
      }
    }
  }
  ._attribute-content {
    flex: 1;
    height: 10px;
    background-color: white;
    .el-input__inner {
      box-shadow: none;
      height: 26px;
    }
    .el-input.is-disabled .el-input__inner {
      background-color: none;
      cursor: default;
    }
  }

  .search-area {
    padding-left: 26px;
    .el-input__wrapper {
      border: 1px solid #d0d0d0;
      box-shadow: none;
      padding: 0 12px;
      .el-input__icon {
        margin-right: 5px;
      }
    }
  }
}

</style>
